<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <Style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box{
            width: 600px;
            height: 360px;
            margin: 0 auto;
            background-color: rgb(231, 231, 231);
        }
        p>img{
            width: 20px;
            height: 20px;
            margin:20px 0 0 20px;
            
        }
        #box>span{
            display: inline-block;vertical-align: middle;margin:20px 0 0 20px;
        }
        #bpsp2{
            float: right;
            vertical-align: top;margin:20px 0 0 20px;margin-right: 20px;
            font-size: 16px;
        }
        #box>div{
            box-sizing: border-box;
            float: left;
            width: 180px;
            height: 300px;
           
            margin-left: 14px;

        }
        #box>div>div{
            box-sizing: border-box;
            width: 180px;
            height: 180px;
            background-color: rgb(255, 255, 255);
            border-bottom: 5px solid rgb(249, 239, 239);
        }
        .bdp{
            box-sizing: border-box;
            text-align: center;
            padding: 30px 20px 0 20px;
            font-size: 14px;
            color: rgb(164, 164, 164);
        }
    </Style>
</head>
<body>
    <div id="box">
        <p><img src="https://picsum.photos/20/20?random=1"><span id="bpsp1">热门课程</span><span id="bpsp2">more</span></p>
        <div><div><img src="https://picsum.photos/180/180?random=1"></div><p class="bdp">谁有咋汁哇乱加咋汁哇</p></div>
        <div><div><img src="https://picsum.photos/180/180?random=2"></div><p class="bdp">谁有咋汁哇</p></div>
        <div><div><img src="https://picsum.photos/180/180?random=3"></div><p class="bdp">谁有咋汁哇</p></div>
    </div>
</body>
</html>